<%--
  Created by IntelliJ IDEA.
  User: wk
  Date: 2020/5/10
  Time: 18:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>轮播图管理</title>
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" type="text/css">
    <style type="text/css">
        .layui-table-cell{ text-align: center; height: auto; white-space: normal; }
    </style>
</head>
<script>
    function myTable(){
        layui.table.render({
            elem: '#bannerTable' //指定原始表格元素选择器（推荐id选择器）
            ,page:true
            ,url:'${pageContext.request.contextPath}/banner/findAll'
            ,toolbar:"#myToolBar"
            ,cols: [[
                {field:'bannerId',title:'ID'},
                {field:'bannerImageUrl',title:'图片',templet:'' +
                        '<div><img src="${pageContext.request.contextPath}/img/{{d.bannerImageUrl}}"></div>'},
                {field:'bannerOldName',title:'图片名称'},
                {field:'bannerState',title:'图片状态',templet:function (d) {
                        return d.bannerState==1?"激活":"冻结"
                    }},
                {field:'bannerDate',title:'上传日期'},
                {field:'bannerDescription',title:'图片描述'},
                {title:'操作',templet:"#caozuoTpl",align:"center"}
            ]] //设置表头
            //,…… //更多参数参考右侧目录：基本参数选项
        });
    }
    layui.use(['element','jquery','table','upload','form'], function(){
        element = layui.element;
        $ = layui.jquery;
        var table = layui.table;
        var upload = layui.upload;
        var form = layui.form;
        myTable();

        //文件上传
        upload.render({
            elem:"#test1"
            ,auto:false
            ,field:"picture1"
            ,accept:"images"
            ,choose: function(obj){
                var files1 = obj.pushFile()
                obj.preview(function(index, file, result1){
                    $('#demo1').attr('src', result1); //图片链接（base64）
                });
            }
        });

        //文件上传
        upload.render({
            elem:"#test2"
            ,auto:false
            ,field:"picture2"
            ,accept:"images"
            ,choose: function(obj){
                var files1 = obj.pushFile()
                obj.preview(function(index, file, result1){
                    $('#demo2').attr('src', result1); //图片链接（base64）
                });
            }
        });

        //表单添加
        form.on('submit(addBanner)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

            var formData = new FormData($("#addBanner")[0]);

            $.ajax({
                url:"${pageContext.request.contextPath}/banner/add",
                data:formData,
                processData:false,
                contentType:false,
                type:"POST",
                success:function (data) {
                    layer.msg(data.data, {
                        icon: 1,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        //do something
                        // 关闭弹出层
                        layer.closeAll();
                        //刷新表格
                        table.reload("bannerTable")
                        $("#addBanner")[0].reset();
                        table.render();
                    });
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //表单修改
        form.on('submit(updateBanner)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

            var formData = new FormData($("#updateBanner")[0]);

            $.ajax({
                url:"${pageContext.request.contextPath}/banner/update",
                data:formData,
                processData:false,
                contentType:false,
                type:"POST",
                success:function (data) {
                    layer.msg(data.data, {
                        icon: 1,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        //do something
                        // 关闭弹出层
                        layer.closeAll();
                        //刷新表格
                        table.reload("bannerTable")
                        $("#updateBanner")[0].reset();
                        table.render();
                    });
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });

</script>

<script>

    //打开添加页面
    function toAdd() {
        layui.layer.open({
            type:1,
            title:'添加',
            content: $('#addBanner'),
            area:['800px','600px'],
            anim:5
        });
    }

    //打开修改页面
    function toUpdate(id) {
        $.ajax({
            url:"${pageContext.request.contextPath}/banner/findOne",
            data:{id:id},
            type:"POST",
            success:function (data) {
                layui.form.val("updateBanner",data.data);
                console.log(data.data.bannerOldName)
                var imgUrl =  data.data.bannerImageUrl;
                $("#demo2").prop("src","${pageContext.request.contextPath}/img/"+imgUrl);
                //打开弹出层
                layui.layer.open({
                    type:"1",
                    title:"修改弹出层",
                    content:$("#updateBanner"),
                    area:['800px','600px']
                })
            }
        })
    }

    //查询
    function doSearch() {
        var $=layui.jquery;
        var  table = layui.table;
        //获取name值
        var name = $("#bannerOldName").val();
        //重新加载
        table.reload("bannerTable",{where:{"bannerOldName":name}})
        $("#bannerOldName").val(name)
    }
</script>
<!--操作模板 -->
<script type="text/html" id="caozuoTpl">
    <button type="button" class="layui-btn layui-btn-danger" onclick="delete({{d.bannerId}})">删除</button>
    <button type="button" class="layui-btn" onclick="toUpdate({{d.bannerId}})">修改</button>
</script>
<!-- 工具栏开始-->
<script type="text/html" id="myToolBar">
    <button type="button" class="layui-btn layui-btn-danger" onclick="deleteSelected()">批量删除</button>
    <button type="button" class="layui-btn layui-btn-normal" onclick="toAdd()">添加</button>
    <div class="layui-inline">
        <label  class="layui-form-label">名称</label>
        <div class="layui-input-inline" style="width:200px;">
            <input type="text" name="bannerOldName" id="bannerOldName" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" onclick="doSearch()" lay-filter="doSubmit" id="doSearch">搜索</button>
</script>
<!-- 工具栏结束-->

<!-- 弹出层==>添加页面开始-->
<form style="display: none;margin: 20px"  id="addBanner" class="layui-form" enctype="multipart/form-data"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">图片名</label>
        <div class="layui-input-block">
            <input type="text" name="bannerOldName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <input type="text" name="bannerDescription" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="bannerState" lay-verify="required" value="1" title="激活" checked>
            <input type="radio" name="bannerState" lay-verify="required" value="0" title="冻结" >
        </div>
    </div>
    <div class="layui-upload " style="margin-left: 100px">
        <button type="button" class="layui-btn picture1" id="test1" >上传图片</button>
        <div class="layui-upload-list">
            <img  class="layui-upload-img " id="demo1" width="100px" >
            <p id="demoText1"></p>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addBanner">添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!-- 弹出层==>添加页面结束-->

<!-- 弹出层==>修改页面开始-->
<form style="display: none;margin: 20px"  id="updateBanner"  lay-filter="updateBanner" class="layui-form" enctype="multipart/form-data"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">图片名</label>
        <div class="layui-input-block">
            <input type="text" name="bannerOldName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            <input type="hidden" name="bannerId">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <input type="text" name="bannerDescription" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="bannerState" lay-verify="required" value="1" title="激活" checked>
            <input type="radio" name="bannerState" lay-verify="required" value="0" title="冻结" >
        </div>
    </div>
    <div class="layui-upload " style="margin-left: 100px">
        <button type="button" class="layui-btn picture1" id="test2" >上传图片</button>
        <div class="layui-upload-list">
            <img  class="layui-upload-img " id="demo2" width="100px" >
            <p id="demoText2"></p>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateBanner">修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!-- 弹出层==>添加页面结束-->
<body>

<table id="bannerTable"></table>
</body>
</html>
